import React, { useState, useEffect } from 'react'
import { message, Table } from 'antd'
import PropTypes from 'prop-types'
import _ from 'loadsh'
import { mapStateToProps, mapDispatchToProps } from '@components/Component'
import { connect } from 'react-redux'
import style from './Block.module.less'
import { awaitWrap, strToNum } from '@js/tool'
import { getData, getFinanceCauseAction } from '../ajax/index'

// 获取表格字段配置
function getColumns (addWindow, formData) {
  return [
    {
      title: '金融类型',
      dataIndex: 'name',
      key: 'name'
    },
    {
      title: '案件数',
      dataIndex: 'casenum',
      key: 'casenum',
      sorter: true,
      align: 'right',
      render: (v, l) => {
        const f = _.cloneDeep(formData)
        f.casesubtype = l.name
        f.casetype = '金融案件'
        return (
          <a onClick={() => addWindow({ id: 'AllCaseManage', title: '仲裁案件列表', componentName: 'AllCaseManage', forceRefresh: true, meta: { formData: f } })}>{v}</a>
        )
      }
    },
    {
      title: '案件数占比',
      dataIndex: 'casenumPercent',
      key: 'casenumPercent',
      align: 'right'
    },
    {
      title: '标的',
      dataIndex: 'disputeamount',
      key: 'disputeamount',
      sorter: true,
      render: (v) => {
        return transferUnit(v)
      },
      align: 'right'
    },
    {
      title: '标的占比',
      dataIndex: 'disputeamountPercent',
      key: 'disputeamountPercent',
      align: 'right'
    },
    {
      title: '平均标的',
      dataIndex: 'disputeamountavg',
      key: 'disputeamountavg',
      render: (v) => {
        return transferUnit(v)
      },
      align: 'right'
    },
    {
      title: '仲裁费',
      dataIndex: 'fee',
      key: 'fee',
      sorter: true,
      render: (v) => {
        return transferUnit(v)
      },
      align: 'right'
    },
    {
      title: '仲裁费占比',
      dataIndex: 'feePercent',
      key: 'feePercent',
      align: 'right'
    },
    {
      title: '平均仲裁费',
      dataIndex: 'feeavg',
      key: 'feeavg',
      render: (v) => {
        return transferUnit(v)
      },
      align: 'right'
    }
  ]
}

// 转换单位
function transferUnit (v) {
  if (v > 100000000) {
    return Math.round(v / 1000000) / 100 + '亿'
  }
  if (v > 10000) {
    return Math.round(v / 100) / 100 + '万'
  }
  return v
}

// 获取数据
async function initData (condition, order, orderField, fieldall, setList, setLoading) {
  if (!condition) {
    return false
  }
  setLoading(true)
  const [e, d] = await awaitWrap(getData(condition, order, orderField, 'casesubtype', fieldall))
  setLoading(false)
  if (e) {
    return message.warning(e.message)
  }
  setList(formatData(d))
}

// 格式化数据
function formatData (d) {
  let casenum = 0
  let disputeamount = 0
  let fee = 0
  d.forEach(li => {
    casenum += strToNum(li.casenum)
    disputeamount += strToNum(li.disputeamount)
    fee += strToNum(li.fee)
  })
  d.forEach(li => {
    li.casenumPercent = getPercent(li.casenum, casenum)
    li.disputeamountPercent = getPercent(li.disputeamount, disputeamount)
    li.feePercent = getPercent(li.fee, fee)
  })
  return d
}

// 获取百分比
function getPercent (v, total) {
  if (v && total) {
    return Math.round(v / total * 10000) / 100 + '%'
  }
}

// 改变表格排序
function tableChange (v, filters, sorter, setOrder, setOrderField) {
  let order = ''
  if (sorter.order === 'descend') {
    order = 'DESC'
  } else if (sorter.order === 'ascend') {
    order = 'ASC'
  }
  setOrder(order)
  setOrderField(sorter.field)
}

// 获取金融案由
async function getFieldall (setFieldall) {
  const [e, d] = await awaitWrap(getFinanceCauseAction())
  if (e) {
    return message.warn(e.message)
  }
  setFieldall(d.join())
}

function Main ({ addWindow, condition, formData }) {
  const [list, setList] = useState([])
  const [loading, setLoading] = useState(false)
  const [order, setOrder] = useState('')
  const [orderField, setOrderField] = useState('')
  const [fieldall, setFieldall] = useState('')
  useEffect(() => {
    getFieldall(setFieldall)
  }, [setFieldall])
  useEffect(() => {
    initData(condition, order, orderField, fieldall, setList, setLoading)
  }, [condition, fieldall, order, orderField])
  return (
    <div className={style.container}>
      <Table rowKey='name' loading={loading} columns={getColumns.call(this, addWindow.bind(this), formData)} dataSource={list} pagination={false} onChange={(v, filters, sorter) => tableChange(v, filters, sorter, setOrder, setOrderField)} />
    </div>
  )
}

Main.propTypes = {
  condition: PropTypes.array,
  formData: PropTypes.object
}
Main.defaultProps = {
  condition: null,
  formData: {}
}

const mapState = mapStateToProps(function (state) {
  return {
  }
})

const mapDispatch = mapDispatchToProps(function (dispatch) {
  return {
  }
})

export default connect(mapState, mapDispatch)(Main)
